import React, {useState, useEffect} from 'react';
import ReactDOM from 'react-dom';
import {Column} from '@ant-design/plots';

const DemoColumn = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    asyncFetch();
  }, []);

  const asyncFetch = () => {
    setData([
        {univ_name: '东华理工大学', cour_level: '国家级', count: 21},
        {univ_name: '东华理工大学', cour_level: '省级', count: 23},
        {univ_name: '华东交通大学', cour_level: '国家级', count: 24},
        {univ_name: '华东交通大学', cour_level: '省级', count: 23},
        {univ_name: '江西理工大学', cour_level: '国家级', count: 31},
        {univ_name: '江西理工大学', cour_level: '省级', count: 19},
        {univ_name: '南昌大学', cour_level: '国家级', count: 29},
        {univ_name: '南昌大学', cour_level: '省级', count: 32},
        {univ_name: '南昌航空大学', cour_level: '国家级', count: 26},
        {univ_name: '南昌航空大学', cour_level: '省级', count: 24}
      ]
    )
  };
  const config = {
    data,
    isGroup: true,
    xField: 'univ_name',
    yField: 'count',
    seriesField: 'cour_level',
    label: {
      // 可手动配置 label 数据标签位置
      position: 'middle',
      // 'top', 'bottom', 'middle'
      // 可配置附加的布局方法
      // layout: [
      //   // 柱形图数据标签位置自动调整
      //   {
      //     type: 'interval-adjust-position',
      //   }, // 数据标签防遮挡
      //   {
      //     type: 'interval-hide-overlap',
      //   }, // 数据标签文颜色自动调整
      //   {
      //     type: 'adjust-color',
      //   },
      // ],
    },
    legend: {
      position: 'top-left',
      itemName: {style: {fontSize: 18}},
    },
    yAxis: {
      label: {
        style: {
          fontSize: 16
        }
      }
    },
    xAxis: {
      label: {
        style: {
          fontSize: 16
        }
      }
    },
  };

  return <Column {...config} />;
};

export default DemoColumn
